/*
   Copyright 2010, Sanket Parab

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
   
   This is a Test User Interface meant for demo purposes.
 */
 div, input, button, textarea, p {
	margin: 0;
	padding: 0;
}

body {
	margin: 0px;
	color: #333333;
	font-size: 14px;
	font-family: Verdana;
	z-index: 10;
	position: relative;
	overflow-y: scroll;
}

label.textarea {
	vertical-align: top;
	position: relative;
	top: 3px;
}

label {
	display: block;
	font-weight: bold;
}

input::-moz-focus-inner, button::-moz-focus-inner {
	border: none;
	outline: none;
}

h1, h2, h3 {
	margin: 0px;
	padding: 0px;
	color: #00589B;
	font-family: helvetica;
	line-height: 1.2em;
	padding: 0px 0px 15px;
}

.content h3 {
	padding: 0;
}

a {
	font-family: Helvetica;
	color: #195A9A;
	outline: none;
	text-decoration: none;
	font-weight: bold;
	border-bottom: 1px solid #CCCCCC;
	color: #CC0000;
}

a:hover {
	border-bottom-color: #CC0000;
}

a:active {
	border-bottom-color: #111111;
	color: #111111;
}

input, textarea {
	border: 1px solid #AAAAAA;
	color: #666666;
	font-family: Verdana;
	font-size: 12px;
	line-height: 20px;
	margin: 2px 2px 2px 0;
	padding: 5px 5px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

textarea {
	margin-top: 6px;
}

input:hover, textarea:hover, input:focus, textarea:focus {
	color: #222222;
	border-color: #333333;
}

button {
	font-size: 14px;
	text-align: center;
	font-family: Helvetica;
	color: #666666;
	margin: 2px 2px 2px 0;
	padding: 4px 6px 3px;
	outline: medium none;
	cursor: pointer;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
	background: -moz-linear-gradient(center top, #FFFFFF, #EDEDED) repeat scroll 0 0 transparent;
	border: 1px solid #B7B7B7;
}

button:hover {
	background: -moz-linear-gradient(center top, #FFFFFF, #DCDCDC) repeat scroll 0 0 transparent;
	border-color: #333333;
}

button:active {
	background: -moz-linear-gradient(center top, #EDEDED, #FFFFFF) repeat scroll 0 0 transparent;
	color: #999999;
	border-color: #333333;
}

button[disabled] {
	background-color: #f2f2f2 !important;
	color: #666 !important;
	border-color: #B4B4B4;
	text-shadow: none;
}

.left {
	float: left
}

.right {
	float: right
}

.clear {
	clear: both
}

.invisible,.none,.hidden {
	display: none;
}

.block {
	display: block;
}

.center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.required {
	color: red;
	margin-left: -4px;
	vertical-align: top;
}

.loader {
	background: url("images/bg/loader.gif") no-repeat scroll 0 30px transparent;
	width: 160px;
	height: 80px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#header {
	margin: 0px 0px 20px;
	background-color: #E7E7E7;
	opacity: 0.8;
}

#header:hover {
	opacity: 1;
}

#header img,#header span {
	cursor: pointer;
}

#header-wrap {
	width: 1000px;
	margin: 0px auto;
}

#logo {
	width: 600px;
}

#logo img {
	cursor: pointer;
}

#logo span {
	position: relative;
	top: -20px;
	font-size: 25px;
	color: #445599;
}

#logo:hover {
	text-shadow: 3px 3px rgba(0, 0, 0, 0.2);
}

#logo-logged-in:hover {
	padding-right: 00px;
	background: url("images/logo-home.png") no-repeat scroll
		center right;
}

#header-options {
	float: right;
	margin-top: -60px;
}

#logout-form {
	margin-top: -80px;
}

.content {
	width: 960px;
	margin: 0px auto;
}

.popup {
	left: 50%;
	top: 10%;
	position: fixed;
	z-index: 30;
	border: 5px solid rgba(82, 82, 82, 0.5);
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	width: 500px;
	margin-left: -250px;
}

.popup-content {
	padding: 5px 10px;
	background: white;
}

#footer {
	margin: 20px auto 0px;
	padding: 10px 20px 0px;
	width: 938px;
	border: 1px solid rgb(200, 200, 200);
	border-bottom: none;
	-moz-border-radius-topLeft: 10px;
	-moz-border-radius-topRight: 10px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	text-align: center;
}

#fade {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	min-height: 700px;
	z-index: 20;
	background: rgba(200,200,200,0.5);
	opacity: 0.8;
}

a.expand {
	background: url("images/btn/plus.png") no-repeat scroll 0 0 transparent;
	padding-left: 20px;
	border: none;
	margin-bottom: 10px;
	display: inline-block;
}

a.expand:hover {
	background: url("images/btn/plus.png") no-repeat scroll 0 -32px transparent;
}

a.collapse {
	background: url("images/btn/minus.png") no-repeat scroll 0 0 transparent;
	padding-left: 20px;
	border: none;
	margin-bottom: 10px;
	display: block;
}

a.collapse:hover {
	background: url("images/btn/minus.png") no-repeat scroll 0 -32px transparent;
}

.course {
	border-bottom: 1px solid #CCCCCC;
	padding: 20px 0;
}

.course-info {
	width: 525px;
	float: left;
}

.course-annotations {
	border-left:1px solid #CCCCCC;
	float:right;
	padding-left:10px;
	width:410px;
}

.course-annotations h3 {
	margin: 0 !important;
}

.course-annotations textarea {
	width: 250px;
}

.course-annotations p {
	border-bottom: 1px solid #CCCCCC;
	padding: 5px 0 10px;
}

.course-annotations p span {
	display:inline-block;
	font-weight:bold;
	width:55px;
}

#annotate-course-form label {
	display: inline;
}

#annotate-course-form #date {
	width: 60px;
}

.course-name, .group-name {
	margin-bottom: 10px;
}

.course-options, .course-data, .group-options, .group-data, .student, .student-options {
	margin: 0 0 10px 30px;
}

.course-options a, .group-options a, .student-options a {
	color: #660099;
}

.course-options a:hover, .group-options a:hover, .student-options a:hover {
	border-bottom-color: #660099;
}

.course h3 {
	margin-left: 30px;
	padding: 0 0 10px;
}

.group {
	border-bottom:1px solid #CCCCCC;
	margin:0 0 10px 30px;
	padding-bottom:10px;
}

#row-add-group.group {
	margin-bottom: 0;
	border: none;
}

.metrics li {
	display:inline-block;
	list-style:none outside none;
	text-align:center;
	margin-bottom: 5px;
}

.metrics p {
	margin: 0 !important;
}

.metrics li img {
	width: 75px;
}

.student-name {
	display: block;
	margin-bottom: 10px;
}

#addcourse.popup, #modifycourse.popup, #deletecourse.popup {
	width: 300px;
	margin-left: -150px;
}

#addcourse.popup input, .popup textarea, #modifycourse.popup input, #modifycourse.popup textarea {
	width: 266px;
}

#addgroup label, #modifygroup label {
	display: inline-block;
	width: 190px;
}

#addgroup input[type="text"], #addgroup textarea, #modifygroup input[type="text"], #modifygroup textarea {
	width: 271px;
}

#addstudent.popup, #modifystudent.popup {
	width: 395px;
	margin-left: -200px;
}

#addstudent label, #modifystudent label {
	display: inline-block;
	width: 126px;
}

#addstudent input, #modifystudent input {
	width: 230px;
}

.top-btn {
	margin-left: 120px;
	display: inline-block;
}

#annotatecourse {
	top: 10%;
}

#annotatecourse p {
	word-wrap: break-word;
}

#annotatecourse p span {
	color: #999;
	font-size: 11px;
	vertical-align: top;
}